<template>
  <div class="order-page">
    <!-- 面包屑导航 -->
    <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>我的好茶仓</el-breadcrumb-item>
      <el-breadcrumb-item :to="'/user/order?status=' + orderStatus">个人中心</el-breadcrumb-item>
      <el-breadcrumb-item :to="'/user/order?status=' + orderStatus">我的订单</el-breadcrumb-item>
      <el-breadcrumb-item>查看物流</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 简介 -->
    <div class="info-wrapper">
      <p> 物流单号： <span>{{shippingNum}}</span></p>
      <p> 承运公司： <span>{{shippingName}}</span></p>
    </div>
    <!-- 详情 -->
    <div class="main-conten-third">
      <div class="track-list" v-for="(item, index) in trackRate" :key="index">
        <div class="circle">
          <div class="cricle-icon"></div>
          <div class="shu-icon"></div>
        </div>
        <div class="track-rate">
          <p>{{item.AcceptStation}}</p>
          <p>{{item.AcceptTime}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      orderId: this.$route.query.orderId || '',
      orderStatus: this.$route.query.status || '-1', // 订单状态  全部：-1；待付款：1；待发货：2；待收货：3；已完成：4； 待确认：7；
      shippingName: '', // 快递名称
      shippingNum: '', // 快递单号
      trackRate: [] // 物流详情
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    // 获取物流信息
    getData () {
      this.$http.post(this.$api + '/pc/order/getOrderTraces', {
        orderId: this.orderId
      }).then(res => {
        if (res.responseCode === '0000') {
          this.shippingName = res.data.shippingName
          this.shippingNum = res.data.shippingNum
          this.trackRate = res.data.Traces
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/basic.scss';
.order-page {
  margin: auto;
  width: 1200px;
  .breadcrumb {
    margin: 20px 0;
  }
  .info-wrapper {
    margin-bottom: 20px;
    padding: 10px 20px;
    background: #fff;
    border: solid 1px $border_color;
    p {
      padding: 7px 0;
      color: $f_sub;
      font-size: 14px;
      span {
        color: $f_main;
      }
    }
  }
  .main-conten-third{
    border: 1px solid $border_color;
    background: #fff;
    margin-bottom: 30px;
    padding: 40px 0 50px 48px;
    .track-list{
      display: flex;
      .circle {
        height: 88px;
        margin-right: 45px;
        .cricle-icon{
          width: 13px;
          height: 13px;
          border-radius: 50%;
          background: $bg_circle;
        }
        .shu-icon{
          height: 82px;
          background: $bg_circle;
          width: 3px;
          margin:  0 auto;
        }
      }
      .track-rate{
        width: 749px;
        border-bottom: 1px dashed $border_color;
        margin-bottom: 15px;
        color: $f_normal;
        font-size: $fz_14;
        p:nth-child(2) {
          margin: 8px 0;
        }
        .rate {
          margin-bottom: 15px;
          color: $f_main;
        }
      }
    }
  }
  .main-conten-third div:first-child {
    .circle {
      .cricle-icon{
        width: 22px;
        height: 22px;
        background: url(../../assets/images/icon-circle.png) no-repeat;
        margin-left: -4px;
      }
      .shu-icon{
        height: 74px;
        background: $bg_circle;
        width: 3px;
        margin-left: 5px;
      }
    }
    .track-rate {
      .rate {
        color: $red_d;
      }
    }
  }
}
</style>
